<script setup>
import {ref, inject} from 'vue'
import {ElUpload} from 'element-plus'
import 'vue-cropper/dist/index.css'
import {VueCropper} from 'vue-cropper'
import axios from 'axios'

const userinfo=inject("userinfo")
const model=defineModel()
const avatar_name=defineModel("avatar_name")
const props=defineProps(["avatar_name"])

const ref_cropper=ref()
const img=ref('')
function handleSelect(uploadFile, uploadFiles){
    img.value=URL.createObjectURL(uploadFile.raw)
}
function handleUpload(){
    ref_cropper.value.getCropBlob(data=>{
        let formData=new FormData()
        formData.append('avatar',data, 'avata.png')
        // 上传头像
        axios.post(
            `/api/talent_audit/upload_avatar/${userinfo.value.id}`,
            formData,
            {headers:{'Content-Type':'multipart/form-data'}}
        ).then(res=>{
            avatar_name.value=res.data.name
            model.value=false
        }).catch(e=>{
            console.log(e)
        })
    })
}

//点击弹窗以外区域，关闭弹窗
const main=ref(null)
function handleClose(e){
    if(!main.value.contains(e.target)){
        model.value=false
    }
}
</script>

<template>
<transition name="l-fade-in-linear">
    <div class="container" @click.stop="handleClose($event)">
        <div class="center" ref="main">
            <div class="avatar">
                <VueCropper
                    ref="ref_cropper"
                    autoCrop
                    centerBox
                    :canMove="false"
                    :img="img"
                    :outputSize="1"
                    outputType="png"
                    :fixed="true"
                    :fixedNumber="[100, 130]"
                    :maxImgSize=325
                    :limitMinSize=100
                ></VueCropper>
            </div>
            <div class="operation">
                <el-upload
                    accept="image/*"
                    :show-file-list="false"
                    :limit="1"
                    :auto-upload="false"
                    :on-change="handleSelect"
                >
                    <template #trigger>
                        <el-button type="primary" class="button">选择照片</el-button>
                    </template>
                    <el-button type="success" @click="handleUpload" class="button">上传照片</el-button>
                    <el-button type="info" @click="model=false" class="button">取消</el-button>
                </el-upload>
            </div>
        </div>
    </div>
</transition>
</template>

<style scoped>
.container{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:10;
    background-color:rgba(200,200,200,0.6);
}
.center{
    display:flex;
    flex-direction:column;
    align-items:center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 410px;
    border-radius:10px;
    background-color:white;
    opacity:1;
    box-shadow: var(--el-box-shadow);
}
.avatar{
    width:250px;
    height:325px;
    margin-top:20px;
}
.operation{
    margin-top:20px;
}
.button{
    width:70px;
    margin:0 5px;
}
</style>